<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8">		<![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9">			<![endif]-->
<!--[if gt IE 9]>  <html>								<![endif]-->
<!--[if !IE]><!--> <html>								<!--<![endif]-->
<head>

<meta charset="utf-8">

<title>Grid - dataTables</title>

<link rel="stylesheet" type='text/css' href="style/bootstrap.min.css">
<link rel="stylesheet" type='text/css' href="style/bootstrap-reset.css">
<link rel="stylesheet" type='text/css' href="style/saas-style.css">
<link rel="stylesheet" type='text/css' href="style/jquery.dataTables.min.css">
<link rel="stylesheet" type='text/css' href="style/dataTables.bootstrap.css">
<link rel="stylesheet" type='text/css' href='style/select2.css'>
<link rel="stylesheet" type='text/css' href='style/select2-bootstrap.css'>
<link rel="stylesheet" type='text/css' href="style/saas-main.css">

<script src="script/jquery-1.10.0.js"></script>
<script src="script/jquery.dataTables.js"></script>
<script src="script/grid/editableCells/dataTables.editableCells.js"></script>
<script src="script/grid/selectableRows/dataTables.selectableRows.js"></script>
<script src="script/grid/paginationCustomize/dataTables.paginationCustomize.js"></script>
<script src="script/select2.js"></script>

</head>

<body>
	
<section id="container">
	<header class="header white-bg">
        
    </header>
    <aside class="sidebar-wrapper">
        
    </aside>
    <section id="main-content">
        <section class="wrapper">
            <div class="row">
            	<div class="col-lg-12">
                    <div class="breadcrumb">
                        公众号管理  /   我的公众号  / 预约量房
                    </div>
                    <button id="test">save1</button>
                    <button id="test2">save2</button>
                </div>
                <div class="col-lg-12">
                    <div class="data-list">
                        <h2 class="title">预约量房地址</h2>
                        
                        <table class="display table table-bordered table-striped dataTable nowrap" id="dynamic-table" data-editable="true">
                            <thead>
                            <tr>
                            	<th class="checkable">checkbox</th>
                                <th data-key='name'>姓名</th>
                                <th data-key='phone'>联系电话</th>
                                <th data-key='decorationCompanyName'>装修公司名称</th>
                                <th data-key='createTime'>预约时间</th>
                                <th data-key='status' class="editable">状态</th>
                                <th data-key='note' class="editable">备注</th>
                                <th data-key='duration' class="selectable">时效</th>
                                <th data-key='id'>操作</th>
                            </tr>
                            </thead>
                        </table>                     
                    </div>
                </div>
            </div>
        </section>
    </section>
</section>
<script type="text/javascript">
$('#test').on('click',function(){
	$('#dynamic-table').getTableEdited();
});

$('#dynamic-table').DataTable({
    scrollX: true,
    ordering: false,
    synchronizeClasses: [ 'editable', 'checkable', 'selectable' ],
    "fnDrawCallback": function( oSettings ) {                
        pagination(oSettings);
        selectable();
    },
    data: [{"createTime":"2017-05-11 19:27:37","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"59144aa9e1e49f38af63da44","name":"预约","note":"4123","openId":"","phone":"15960888999","status":"YCL"},{"createTime":"2017-05-11 19:03:58","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5914451de1e49f38af63da27","name":"预约装修","note":"大规模","openId":"","phone":"15512345685","status":"YCL"},{"createTime":"2017-05-11 18:58:01","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"591443b9e1e49f38af63da25","name":"test","note":"1221212","openId":"","phone":"13073083899","status":"YCL"},{"createTime":"2017-05-11 11:50:50","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913df9ae1e49f4d8d28b73a","name":"test","note":"4545","openId":"","phone":"13459263233","status":"YCL"},{"createTime":"2017-05-11 11:02:06","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913d42ee1e49f4d8d28b72f","name":"测试","note":"","openId":"","phone":"15960836836","status":"NEW"},{"createTime":"2017-05-11 10:46:19","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913d07be1e49f4d8d0f575b","name":"小姚","note":"","openId":"","phone":"15960222333","status":"NEW"},{"createTime":"2017-05-11 10:45:31","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913d04ae1e49f4d8d0f575a","name":"测试","note":"","openId":"","phone":"15936912333","status":"NEW"},{"createTime":"2017-05-11 10:37:49","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913ce7de1e49f4d8d0f5753","name":"test","note":"","openId":"","phone":"13459262334","status":"NEW"},{"createTime":"2017-05-11 10:31:53","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913cd18e1e49f4d8d0f5751","name":"测试","note":"fdsafsfd","openId":"","phone":"15936912358","status":"YCL"},{"createTime":"2017-05-11 10:26:43","decorationCompanyId":"8a07b34b04104d9694df5b584518a4f5","decorationCompanyName":"微盟","id":"5913cbe3e1e49f4d8d0f574f","name":"test","note":"","openId":"","phone":"13063070987","status":"NEW"}],
    columns: [
    	{
            render: function (data, type, full, meta) {
            	return "<input type='checkbox' />";
            }
        },
        {
            data: "name"
        },
        {
            data: "phone",
            render: function (data, type, full, meta) {
            	return "<a href="+data+">"+data+"</a>"
            }
        },
        {
            data: "decorationCompanyName"
        },
        {
            data: "createTime"
        },
        {
            data: "status",
            render: function (data, type, full, meta) {
                if (data == undefined || data == "") {
                    return "";
                }
                if (data == "YCL") {
                    return "已处理";
                } else {
                    return "待处理";
                }
            }
        },
        {
            data: "note"
        },
        {
            render: function (data, type, full, meta) {
                return  "<span class='data-visible'>" +
                			"<select data-name='duration' class='select2'><option value='null'>无</option><option>年</option><option>月</option></select>" +
                			"<input data-for='duration' class='visible-hidden editable' type='text' value='0' />" +
                		"</span>"
                ;
            }
        },
        {
            data: "id",
            render: function (data, type, full, meta) {
                return  "<input type='hidden' class='data-id'  value="+data+" />" +
                		"<button title='去处理'  class='btn btn-primary btn-xs' onclick=\"showUpdate('" + data + "')\"><i class='fa fa-pencil'></i></button>"
                ;
            }
        }
    ]
});	
</script>
</body>
</html>